<template>
  <div class="reportManageWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <el-row :gutter="10">
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">行政区域:</span>
                <span class="searchInputFont" >
                  <el-select v-model="searchInfo.districtId" :disabled="$store.state.userInfo.regionId?true:false" @change="searchRowsInfo()" size="mini" clearable placeholder="行政区">
                    <el-option
                      v-for="item in $store.state.districtData"
                      :key="item.id"
                      :label="item.regionName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">案件来源:</span>
                <span class="searchInputFont">
                 <el-select v-model="searchInfo.reportResource" @change="searchRowsInfo()" size="mini" clearable placeholder="案件来源">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">案件类型:</span>
                <span class="searchInputFont">
                 <el-select v-model="searchInfo.reportType" @change="searchRowsInfo()" size="mini" clearable placeholder="案件类型">
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="searchWrap">
                <span class="searchFont">案件周期:</span>
                <span class="searchInputFont" >
                 <el-date-picker
                   style="width: 100%;"
                   v-model="value6"
                   type="daterange"
                   align="left"
                   @change="searchRowsInfo()"
                   placeholder="选择日期范围"
                   size="mini"
                   :picker-options="$store.state.pickerOptions2">
                  </el-date-picker>
                </span>
              </div>
            </el-col>
            <div style="position: absolute;right: 20px;top: 3px;">
              <el-button type="primary" size="small" @click="searchRowsInfo()">查询</el-button>
            </div>
          </el-row>
        </div>
      </div>
      <div class="tableContainer" style="top:78px;background-color: #EFEEF3;padding: 0;">
        <el-row style="background-color: white;margin-bottom: 10px;border-radius: 5px;padding: 20px;">
          <el-col :span="10">
            <barEcharts :perHourData="perHourData" :company="company"></barEcharts>
          </el-col>
          <el-col :span="13" :offset="1">
            <lineEcharts :perHourData="perHourData1" :perHour="company"></lineEcharts>
          </el-col>
        </el-row>
        <div class="tableInner" ref="tableInnerWrap" style="margin-top: 10px;background-color: white;border-radius: 5px;padding: 10px;box-sizing: border-box;">
          <el-table
            ref="multipleTable"
            :data="rows"
            stripe
            :height="tableHeight"
            tooltip-effect="dark"
          >
            <el-table-column
              prop="enterpriseName"
              label="企业名称"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              label="案件总数"
              prop="caseTotal"
            >
            </el-table-column>
            <el-table-column
              label="处置及时"
              prop="overtimeTotal"
            >
            </el-table-column>
            <el-table-column
              prop="closeTatol"
              label="处置完成"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import barEcharts from "./barEcharts.vue"
  import lineEcharts from "./lineEcharts.vue"
  export default {
    props:[],
    data(){
      return {
        company: ["摩拜","ofo"],
        perHourData:[{value:0,name:"摩拜"},{value:0,name:"ofo"}],
        perHourData1:[[0.2,0.3],[0.4,0.5]],
        rows:[],
        tableHeight:120,
        count: 0,
        //以下为搜索
        value6: "",
        multipleSelection: [],
        checkAll: false,
        searchInfo: {
          "districtId":this.$store.state.userInfo.regionId,
          "reportResource":"",
          "reportType":"",
          page: 1,
          rows: 10,
        },
        options: [
          {
            value: '1',
            label: '政府巡查'
          }, {
            value: '2',
            label: '群众举报'
          }, {
            value: '3',
            label: '智能案件'
          }],
        options1: [
          {
            value: '0',
            label: '违投车辆'
          },{
            value: '1',
            label: '乱停乱放'
          }, {
            value: '2',
            label: '损坏车辆'
          }, {
            value: '5',
            label: '区域超量'
          } ,{
            value: '3',
            label: '其它'
          }],
      }
    },
    components: {
      barEcharts,
      lineEcharts
    },
    created(){

      this.searchRowsInfo()
    },
    mounted(){
      /*this.$nextTick(()=>{
        //表格滚动
        this.tableHeight=document.querySelector(".reportManageWrap").clientHeight-482

      })*/
    },
    methods: {
      searchRowsInfo(){

        if (this.value6&&this.value6[0] != null) {
          this.searchInfo.beginTime = this.dtime(this.value6[0]).format('YYYY-MM-DD 00:00:00')
          this.searchInfo.endTime = this.dtime(this.value6[1]).format('YYYY-MM-DD 23:59:59')
        } else {
          this.searchInfo.beginTime = ""
          this.searchInfo.endTime = ""
        }

        this.axios.post(process.env.API_HOST + `/vehicle/selectCaseStatis`, this.searchInfo)
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.rows = result.result
              this.company=[]
              this.perHourData=[]
              this.perHourData1=[[],[]]
              result.result.forEach(item=>{
                this.company.push(item.enterpriseName)
                this.perHourData.push({value:item.caseTotal,name:item.enterpriseName})
                let num1=this.toDecimal(item.closeTatol/item.caseTotal)
                let num2=this.toDecimal(item.overtimeTotal/item.caseTotal)
                this.perHourData1[0].push(num1?num1:0)
                this.perHourData1[1].push(num2?num2:0)
              })
            }
          })
      },

    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .reportManageWrap
    page()


</style>
